import React, { Component } from "react";
import {
	View,
	StyleSheet,
	PickerIOS,
	Text,
	TouchableOpacity,
	Modal
} from "react-native";

export class pickerIOS extends Component {
	constructor(props) {
		super(props);
		console.log(props);
		this.state={
			value: this.props.list[0].value, //默认值取第一个
			index: 0,                        //默认值取第一个
			modalVisible: false
		};
		this._valueChange = this._valueChange.bind(this);
		this._confirm = this._confirm.bind(this);
		this._cancel = this._cancel.bind(this);
	}
	_valueChange(value, index){
		this.setState({value: value, index: index});
	}
	_confirm(){
		if(this.props.get){
			this.props.get(this.state.value, this.state.index);
		};
		this.setState({modalVisible: false});
	}	
	_cancel(){
		this.setState({modalVisible: false});
	}
	render(){
		return(
			<Modal
				animationType={"slide"}
				transparent={true}
          		visible={this.state.modalVisible}
			>
				<View style={styles.container}>
					<View style={styles.bar}>
						<TouchableOpacity style={styles.btn} onPress={this._cancel}>
							<Text style={styles.btn_text}>取消</Text>
						</TouchableOpacity>
						<Text style={styles.btn_title}>{this.props.title}</Text>
						<TouchableOpacity style={styles.btn} onPress={this._confirm}>
							<Text style={styles.btn_text}>确定</Text>
						</TouchableOpacity>
					</View>
					<View style={styles.content}>
						<PickerIOS
							selectedValue={this.state.value}
							onValueChange={this._valueChange}
						>
							{
								this.props.list.map(function(item,index,array){
									return (<PickerIOS.Item
									  key={index}
						              label={item.name}
						              value={item.value}
						            />)
								})
							}
						</PickerIOS>
					</View>
				</View>
			</Modal>
		)
	}
};

const styles = StyleSheet.create({
	container:{
		position: "absolute",
		bottom: 0,
		left:0,
		right:0
	},
	bar:{
		flexDirection: "row",
		height: 48,
		backgroundColor: "#F2F2F2",
		justifyContent: "space-between",
		alignItems: "center"
	},
	btn:{
		width: 60,
		height: 48,
		justifyContent: "center",
		alignItems: "center"
	},
	btn_text:{
		color: "#FF5997",
		fontSize: 15
	},
	btn_title:{
		color: "#333333",
		fontSize: 15
	},
	content:{
		backgroundColor: "#ffffff"
	}
});

module.exports = pickerIOS;